<template>
    <view class="slider-verify-box" v-if="isShow">
        <view class="verifyBox">
            <view style="width: 40rpx;height: 40rpx;  position: absolute;top: 16rpx;left: 30rpx;" @tap="closeSlider"> 
            <image style="width:100%; height: 100%;"
                src="https://mh.qingfentool.vip/upload/image/20230318/4a9d04635c104bea3ae61744f10c74e0.png"
                mode="scaleToFill"
            />
            </view>
            <view class="slider-title" @tap="refreshVerify">
                <image src="https://mh.qingfentool.vip/upload/image/20230318/da5309faa872f63a4fdd4e1b2eb2414a.png"
                    mode="scaleToFill" />

            </view>
            <view class="slide-content">
                <view class="slide-tips">拖动下方滑块完成拼图</view>
                <view class="slider-pintu">
                    <image id="pintuImg"
                        src="https://mh.qingfentool.vip/upload/image/20230601/c2c0a169038043258a1d68fd9dc4a79e.png"
                        class="pintu"></image>

                    <view class="pintukuai" :style="{ top: top + 'px', left: oldx + 'px' }">
                        <image src="https://mh.qingfentool.vip/upload/image/20230601/c2c0a169038043258a1d68fd9dc4a79e.png"
                            :style="{ top: '-' + top + 'px', left: '-' + left + 'px' }"></image>
                    </view>

                    <view class="yinying" :style="{ top: top + 'px', left: left + 'px' }"></view>
                </view>

                <view class="slider-movearea" @touchend="endTouchMove">
                    <movable-area :animation="true"><movable-view :x="x" direction="horizontal" @change="startMove">

                            <view class="huadao_line"></view>
                            <view class="huadao_line1"></view>
                            <view class="huadao_line2"></view>
                        </movable-view></movable-area>

                    <view class="huadao">

                    </view>
                </view>
            </view>

            <!-- <view class="slider-btn-group">
                <view class="slider-btn" @tap="closeSlider">关闭</view>
                <view class="slider-btn slide-btn-refresh" @tap="refreshVerify">刷新</view>
            </view> -->
        </view>
    </view>
</template>

<script>
export default {
    name: 'slider-verify',
    props: {
        isShow: true
    },
    data() {
        return {
            x: 0, //初始距离
            oldx: 0, //移动的距离
            img: '1', //显示哪张图片
            left: 0, //随机拼图的最终X轴距离
            top: 0, //拼图的top距离
        };
    },
    watch: {
        // 每次打开重新刷新拼图
        isShow(newValue, oldValue) {
            if (newValue) {
                this.refreshVerify();	//刷新
            }
        }
    },
    mounted() {
        var that = this;
        that.refreshVerify();
    },
    methods: {
        //刷新验证
        refreshVerify() {
            var gl = Math.random().toFixed(2);
            this.left = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni.upx2px(150); //生成随机X轴最终距离
            this.top = uni.upx2px(190) * gl; //生成随机Y轴初始距离

            if (gl <= 0.2) {
                this.img = 1;
            }
            if (gl > 0.2 && gl <= 0.4) {
                this.img = 2;
            }
            if (gl > 0.4 && gl <= 0.6) {
                this.img = 3;
            }
            if (gl > 0.6 && gl <= 0.8) {
                this.img = 4;
            }
            if (gl > 0.8 && gl <= 1) {
                this.img = 5;
            }
            this.resetMove();	//重置阴影位置
        },

        /* 滑动中 */
        startMove(e) {
            this.oldx = e.detail.x;
        },

        /* 滑动结束 */
        endTouchMove() {
            var that = this;

            if (Math.abs(that.oldx - that.left) <= 5) {
                uni.showToast({
                    title: '验证成功',
                    duration: 2500,
                    success() {
                        that.$emit('touchSliderResult', true);
                    }
                });
            } else {
                that.refreshVerify();
            }
        },

        /* 重置阴影位置 */
        resetMove() {
            this.x = 1;
            this.oldx = 1;
            setTimeout(() => {
                this.x = 0;
                this.oldx = 0;
            }, 300);
        },

        // 关闭
        closeSlider() {
            this.$emit('touchSliderResult', false);
        }
    }
};
</script>

<style lang="less">
.slider-verify-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.verifyBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // width: 85%;
    background-color: #fff;
    border-radius: 20upx;
    box-shadow: 0 0 5upx rgba(0, 0, 0);

    .slider-title {
        width: 70rpx;
        height: 70rpx;
        float: right;
        margin-right: 20rpx;
        margin-top: 20rpx;
        
        image {
            width: 100%;
            height: 100%;
        }
    }
    .slide-content {
        width: 560rpx;
        padding: 0 1em;
        margin: 0 auto;

        .slide-tips {
            font-size: 28rpx;
            height: 100rpx;
            line-height: 155rpx;
            color: rgba(2, 20, 33, 0.45);
        }

        .slider-pintu {
            position: relative;
            width: 100%;
            border-radius: 10rpx;
            overflow: hidden;

            .pintu {
                width: 560rpx;
                height: 315rpx;
                display: block;
                margin: 0 auto;
            }

            .pintukuai {
                position: absolute;
                top: 0;
                left: 0;
                width: 120rpx;
                height: 120rpx;
                z-index: 100;
                box-shadow: 0 0 5upx rgba(0, 0, 0, 0.3);
                overflow: hidden;

                image {
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 560rpx;
                    height: 315rpx;
                }
            }
        }

        .yinying {
            position: absolute;
            width: 120rpx;
            height: 120rpx;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}

.slider-movearea {
    position: relative;
    height: 80rpx;
    width: 100%;
    margin: 25rpx auto;

    movable-area {
        height: 80rpx;
        width: 100%;

        movable-view {
            width: 134rpx;
            height: 52rpx;
            border-radius: 26rpx;
            background-color: #577EFF;
            // background-image: url('../../static/images/slider-verify/icon-button-normal.png');
            background-repeat: no-repeat;
            background-size: auto 30rpx;
            background-position: center;
            position: relative;
            z-index: 100;
            margin-left: 24rpx;

            .huadao_line {
                position: absolute;
                top: 6rpx;
                left: 55rpx;
                width: 5rpx;
                height: 30rpx;
                background-color: #fff;
                margin-right: 5rpx;
                border-radius: 20%;
                top: 50%;
                margin-top: -15rpx;
            }

            .huadao_line1 {
                position: absolute;
                top: 6rpx;
                left: 65rpx;
                width: 5rpx;
                height: 30rpx;
                background-color: #fff;
                border-radius: 20%;
                top: 50%;
                margin-top: -15rpx;
            }

            .huadao_line2 {
                position: absolute;
                top: 6rpx;
                left: 76rpx;
                width: 5rpx;
                height: 30rpx;
                background-color: #fff;
                border-radius: 20%;
                top: 50%;
                margin-top: -15rpx;
            }
        }
    }
}

.huadao {
    width: 100%;
    height: 24rpx;
    background: #eee;
    border-radius: 40rpx;
    box-sizing: border-box;
    position: absolute;
    top: 16rpx;
    left: 0;
    z-index: 99;
}

.slider-btn-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(2, 20, 33, 0.15);

    .slider-btn {
        flex: 1;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 36rpx;
        color: rgba(2, 20, 33, 0.85);

        &:active {
            opacity: 0.8;
        }
    }

    .slide-btn-refresh {
        color: rgba(14, 107, 176, 1);
        border-left: 1px solid rgba(2, 20, 33, 0.15);
    }
}
</style>

